// //下载数据
download()
function download() {
    ajax({
        url: "../data/slide.json",
        type: "get",
        callback: function (res) {
            var res = JSON.parse(res)
            var data = res.data.list.list
            // console.log(res.data.list.list)
            // shangou(data)
            for (var attr in data) {
                // console.log(data[attr])
                render(data[attr])

            }
        }
    })
}
function render(data) {
    $(
        `<li data-index="${data.product_id}">
        <a > 
            <div>
            <img src="${data.pc_img}" alt="">
            </div>
            <div class="title">${data.desc}</div>
            <div class="desc">${data.goods_name}</div>
            <p class="price">
              <span class="num">${data.goods_price}元</span>
              <del>${data.seckill_Price}元</del>
            </p>
        </a> 
    </li>
    `
    ).appendTo(".right .switch")
}

function goodlist() {
    ajax({
        url: "../data/data.json",
        type: "GET",
        callback: function (res) {
            var res = JSON.parse(res)
            // console.log(res)
            renderphone(res)
            lazy(res)
            // switch()
            
            // renderjd(res)
            // rendersmart(res)
            // renderdp(res)
            // renderpj(res)
            // renderAround(res)
            // xq(res)
        }
    })
}

var bool=true,bool2=true,bool3=true;
function lazy(res) {
    
    window.addEventListener("scroll", function (e) {
        let a = document.documentElement.scrollTop
        
        if (a >= 900 &&a<1300) {
            if(!bool) return
            renderjd(res)
            rendersmart(res)
            bool=false
        }else if(a>=1800 && a<2500){
            if(!bool2) return
            bool2=false
            renderdp(res)
            renderpj(res)
        }else if(a>=3000){
            if(!bool3) return
            bool3=false
            renderAround(res)
        }
        else return
        
    })



}


function renderphone(data) {
    var node = $(`   
    	<!-- 手机 -->
				<div class="content-banner">
					<div class="L_container">
						<a>
							<img src="images/phone/banner.webp">
						</a>
					</div>
				</div>
        <div class="L_box-hd">
            <p>${data[0].title}</p>
            <div class="more" id="more">
                <a href="./goodlist.html">
                    查看全部
                    <em class="iconfont iconfont iconfont-arrow-right-big"></em>
                </a>
            </div>
        </div>
     
        <div class="L_box-bd">
            <div class="row">
                <div class="row-l">
                    <a>
                        <img src="${data[0].img}">
                    </a>
                </div>
                <div class="row-r phone_row">
                    <ul></ul>
                </div>                 
        </div>
    `)
    node.appendTo(".phone_a .L_container")
    let data2 = data[0].childs
    for (var attr in data2) {
        // console.log(data2[attr])
        var node2 = $(`
         <li data-index="${data2[attr].id}">
         <a>
            <!-- 图像 -->
            <div class="figure">
                    <a >
                           <img src="${data2[attr].img}">
                      </a>
            </div>
                 <!-- 标题 -->
                 <div>
                 <h3 class="title">
                       <a>
                            ${data2[attr].title}
                        </a>
                    </h3>
                    <p class="desc">${data2[attr].desc}</p>
                    <p class="price">
                        <span class="num">${data2[attr].price}元</span>
                    </p>
                 </div>
              </a>   
        </li>
    `)
        node2.appendTo(".phone_row ul")
    }
}

function renderjd(data) {
    var node = $(`  
    <div class="content-banner">
    <div class="L_container">
        <a>
            <img src="${data[1].topImg}">
        </a>
    </div>
</div>
        <div class="L_box-hd">
			<p>${data[1].title}</p>
				<div id="L_jiadian" class="more dada change" >
					<a class="actived">热门</a>
					<a >${data[1].subTitle}</a>
				</div>
		</div>
        <!-- 内容 -->
        <div class="L_box-bd">
            <div class="row">
                <!-- 内容左边 -->
                <div class="row-left">
                
                    <a>
                        <img src="${data[1].leftChilds[0]}">
                    </a>
                
                    <a>
                        <img src="${data[1].leftChilds[1]}">
                    </a>
               
                   
                </div>
                <div class="row-r" id="L_hot">
                    <ul></ul>
                </div>
                <div class="row-r" id="L_tv">
				    <ul></ul>
                <div>
    `)
    node.appendTo(".jd_a .L_container")
    let data2 = data[1].hotChilds
    let data3 = data[1].childs
    for (var i = 0; i < data2.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}" data-index="${data2[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data2[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a>
                            ${data2[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data2[i].desc}</p>
                    <p class="price">
                        <span class="num">${data2[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo("#L_hot ul")
    }
    $(`<div class="bottom">
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo("#L_hot ul .lastone")

    for (var i = 0; i < data3.length; i++) {
        //     console.log(data2[attr])
        var node3 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data3[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data3[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data3[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data3[i].desc}</p>
                    <p class="price">
                        <span class="num">${data3[i].price}元</span>
                    </p>
                </li>
               
    `)
        node3.appendTo("#L_tv ul")
    }
    $(`<div class="bottom" >
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo("#L_tv ul .lastone")
}

function rendersmart(data) {
    var node = $(`  
    <div class="content-banner">
    <div class="L_container">
        <a>
            <img src="${data[2].topImg}">
        </a>
    </div>
</div>
        <div class="L_box-hd">
			<p>${data[2].title}</p>
				<div class="more change" id="L_jiadian">
					<a  class="actived">热门</a>
					<a >${data[2].subTitle}</a>
				</div>
		</div>
        <!-- 内容 -->
        <div class="L_box-bd">
            <div class="row">
                <!-- 内容左边 -->
                <div class="row-left">          
                    <a >
                        <img src="${data[2].leftChilds[0]}">
                    </a>
               
                    <a >
                        <img src="${data[2].leftChilds[1]}">
                    </a>

                </div>
                <div class="row-r adad" id="L_hot">
                    <ul></ul>
                </div>
                <div class="row-r sasa" id="L_tv">
				    <ul></ul>
                <div>
            </div>
        </div>
    `)
    node.appendTo(".s_a .L_container")
    let data2 = data[2].hotChilds
    let data3 = data[2].childs
    for (var i = 0; i < data2.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data2[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data2[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data2[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data2[i].desc}</p>
                    <p class="price">
                        <span class="num">${data2[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".adad ul")
    }
    $(`<div class="bottom">
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".adad  ul .lastone")
    for (var i = 0; i < data3.length; i++) {
        //     console.log(data2[attr])
        var node3 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data3[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data3[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data3[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data3[i].desc}</p>
                    <p class="price">
                        <span class="num">${data3[i].price}元</span>
                    </p>
                </li>
    `)
        node3.appendTo(".sasa ul")
    }
    $(`<div class="bottom">
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo("#L-tv  ul .lastone")
}

function renderdp(data) {
    var node = $(`  
    <div class="content-banner">
    <div class="L_container">
        <a>
            <img src="${data[3].topImg}">
        </a>
    </div>
</div>
        <div class="L_box-hd">
			<p>${data[3].title}</p>
				<div class="more change" id="L_jiadian">
					<a class="actived">热门</a>
					<a >${data[3].subTitle}</a>
				</div>
		</div>
        <!-- 内容 -->
        <div class="L_box-bd">
            <div class="row">
                <!-- 内容左边 -->
                <div class="row-left">
                
                 <a >
                        <img src="${data[3].leftChilds[0]}">
                    </a>
               
                     <a >
                        <img src="${data[3].leftChilds[1]}">
                    </a>  

                </div>
                <div class="row-r axax" id="L_hot">
                    <ul></ul>
                </div>
                <div class="row-r dede" id="L_tv">
				    <ul></ul>
                <div>
            </div>
         </div>
    `)
    node.appendTo(".dp_a .L_container")
    let data2 = data[3].hotChilds
    let data3 = data[3].childs

    for (var i = 0; i < data2.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data2[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a>
                           <img src="${data2[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data2[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data2[i].desc}</p>
                    <p class="price">
                        <span class="num">${data2[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".axax ul")
    }
    $(`<div class="bottom">
    <a >
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".axax  ul .lastone")
    for (var i = 0; i < data3.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data3[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a>
                           <img src="${data3[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data3[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data3[i].desc}</p>
                    <p class="price">
                        <span class="num">${data3[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".dede ul")
    }
    $(`<div class="bottom">
    <a >
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".dede  ul .lastone")
}

function renderpj(data) {
    var node = $(`  
    <div class="content-banner">
    <div class="L_container">
        <a >
            <img src="${data[4].topImg}">
        </a>
    </div>
</div>
        <div class="L_box-hd">
			<p>${data[4].title}</p>
				<div class="more" id="L_jiadian">
					<a class="actived">热门</a>
					<a >${data[4].subTitle}</a>
				</div>
		</div>
        <!-- 内容 -->
        <div class="L_box-bd">
            <div class="row">
                <!-- 内容左边 -->
                <div class="row-left">
              
                    <a>
                        <img src="${data[4].leftChilds[0]}">
                    </a>
               
                    <a >
                        <img src="${data[4].leftChilds[1]}">
                    </a>
             
                </div>
                <div class="row-r azaz" id="L_hot">
                    <ul></ul>
                </div>
                <div class="row-r xcxc" id="L_tv">
				    <ul></ul>
                <div>
    `)
    node.appendTo(".pj_a .L_container")
    let data2 = data[4].hotChilds
    let data3 = data[4].childs
    for (var i = 0; i < data2.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data2[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data2[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data2[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data2[i].desc}</p>
                    <p class="price">
                        <span class="num">${data2[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".azaz ul")
    }
    $(`<div class="bottom">
    <a >
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".azaz  ul .lastone")
    for (var i = 0; i < data3.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data3[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data3[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data3[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data3[i].desc}</p>
                    <p class="price">
                        <span class="num">${data3[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".xcxc ul")
    }
    $(`<div class="bottom">
    <a >
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".xcxc  ul .lastone")
}

function renderAround(data) {
    var node = $(`  
    <div class="content-banner">
    <div class="L_container">
        <a >
            <img src="${data[4].topImg}">
        </a>
    </div>
</div>
        <div class="L_box-hd">
			<p>${data[5].title}</p>
				<div class="more" id="L_jiadian">
					<a class="actived">热门</a>
					<a >${data[5].subTitle}</a>
				</div>
		</div>
        <!-- 内容 -->
        <div class="L_box-bd">
            <div class="row">
                <!-- 内容左边 -->
                <div class="row-left">
              
                    <a >
                        <img src="${data[5].leftChilds[0]}">
                    </a>
               
                    <a >
                        <img src="${data[5].leftChilds[1]}">
                    </a>
              
                </div>
                <div class="row-r avav" id="L_hot">
                    <ul></ul>
                </div>
                <div class="row-r ytyt" id="L_tv">
				    <ul></ul>
                <div>
    `)
    node.appendTo(".around_a .L_container")
    let data2 = data[5].hotChilds
    let data3 = data[5].childs
    for (var i = 0; i < data2.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data2[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data2[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data2[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data2[i].desc}</p>
                    <p class="price">
                        <span class="num">${data2[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".avav ul")
    }
    $(`<div class="bottom">
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".avav  ul .lastone")
    for (var i = 0; i < data3.length; i++) {
        //     console.log(data2[attr])
        var node2 = $(`
         <li class="${i == 7 ? "lastone" : ''}"  data-index="${data3[i].id}">
            <!-- 图像 -->
             <div class="${i == 7 ? "top" : "figure"}">
                    <a >
                           <img src="${data3[i].img}">
                      </a>
                  </div>
                 <!-- 标题 -->
                 <h3 class="title">
                       <a >
                            ${data3[i].title}
                        </a>
                    </h3>
                    <p class="${i == 7 ? "" : "desc"}">${data3[i].desc}</p>
                    <p class="price">
                        <span class="num">${data3[i].price}元</span>
                    </p>
                </li>
    `)
        node2.appendTo(".ytyt ul")
    }
    $(`<div class="bottom">
    <a>
        <div class="more">
            <div>浏览更多</div>
            <div>电视影音</div>
        </div>
        <em class="iconfont iconfont-circle-arrow-right"></em>
    </a>
</div>`).appendTo(".ytyt  ul .lastone")
}
goodlist()



// function shangou(data) {

//     // console.log(data)
//     setTimeout(function () {
//         var li = document.querySelectorAll(".content-desc li")
//         for (var i = 0; i < li.length; i++) {
//             li[i].onclick = function (e) {
//                 // console.log("aaa")
//                 // var _item=data[this.getAttribute("data-index")]
//                 // console.log(this.getAttribute("data-index"))
//                 for (var i = 0; i < data.length; i++) {
//                     var id =data[i].product_id
//                     if ( id=== this.getAttribute("data-index")) {
//                         // console.log(data[i])
//                         var _item=JSON.stringify(data[i])
//                         // console.log(_item)
//                         localStorage.setItem("now",_item)
//                         location.href="./gooddec.html"
//                     }
//                 }
//             }
//         }
//     }, 100)
// }






